<!DOCTYPE html>

<html>
    <head>
        <title>Contoso Travel</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="/static/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="banner">
            <div id="menu">
                <div class="container">
                    <div class="row">
                        <ul>
                            <li class="selected">home</li>
                            <li>flights</li>
                            <li>hotels</li>
                            <li>cars</li>
                            <li>cruises</li>
                            <li>passports</li>
                            <li>visas</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="container text-center">
                <h1>contoso travel</h1>
                <h3>upload a photo containing signage and let us translate it for you!</h3>
            </div>
        </div>
        
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <form method="POST" enctype="multipart/form-data">
                        <div style="display: none">
                            <input type="file" id="upload-file" name="file" accept=".jpg,.jpeg,.png,.gif">
                            <input type="submit" id="submit-button" value="Upload">
                        </div>
                        <select id="language" class="form-control" name="language">
                            <option value="en">English</option>
                            <option value="zh-Hant">Chinese (simplified)</option>
                            <option value="zh-Hans">Chinese (traditional)</option> 
                            <option value="fr">French</option>
                            <option value="de">German</option>
                            <option value="it">Italian</option>
                            <option value="ja">Japanese</option>
                            <option value="ko">Korean</option>
                            <option value="pt">Portugese</option>
                            <option value="es">Spanish</option>
                        </select>
                        <img id="uploaded-image" src="{{ image_uri }}">
                        <input type="button" id="upload-button" class="btn" value="Upload Photo">
                    </form>
                </div>
            </div>
        </div>

        <div class="container">	
            <div class="row">
                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Result</h4>
                            </div>
                            <div class="modal-body"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <script type="text/javascript">
                    // If flash messages are queued up, show them in a modal dialog
                    var messages = {{ messages | safe }};
                    body = $(".modal-body");
                    body.empty();
        
                    for (i=0; i<messages.length; i++) {
                        body.append("<h2>" +  messages[i] + "</h2>");
                    }
                    
                    $("#myModal").modal("show");
                </script>
            {% endif %}
        {% endwith %} 

        <script type="text/javascript">
            $(function() {
                $("#upload-button").click(function() {
                    $("#upload-file").click();
                });
        
                $("#upload-file").change(function() {
                    $("#submit-button").click();
                });

                $("#language").val("{{ language }}");
            });
        </script>
    </body>
</html>